<!-- 横向滚动组件 -->
<script setup>
import { onUnmounted, reactive } from 'vue'

const size = reactive({ width: 0, height: 0 })

let observer = null

const handleResizeObserver = ({ width, height }) => {
  size.height = height
  size.width = width
}

const vResizeOb = {
  mounted (el, binding) {
    const callback = binding.value

    // 创建 ResizeObserver 实例
    observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.target === el) {
          callback(entry.contentRect);
        }
      }
    })

    // 开始监听容器大小变化
    observer.observe(el)

  }
}

onUnmounted(() => observer?.disconnect())
</script>

<template>
  <div v-resize-ob="handleResizeObserver" class="content-box">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.content-box {
  width: 100%;
  height: 100%;
  .v-scroll {
    --w: calc(v-bind(size.width) * 1px);
    --h: calc(v-bind(size.height) * 1px);
    width: var(--h);
    height: var(--w);
    position: relative;
    transform-origin: left top;
    transform: translateY(var(--h)) rotate(-90deg);
    overflow: hidden scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .content {
      width: var(--w);
      height: var(--h);
      position: absolute;
      left: var(--h);
      transform-origin: left top;
      transform: rotate(90deg);
    }
  }
}
</style>